<template>
  <el-dropdown>
    <el-button type="" class="el-dropdown-link" size="small"
      >列表设置</el-button
    >
    <!-- <span class="el-dropdown-link">
      列表设置<i class="el-icon-arrow-down el-icon--right"></i>
    </span> -->
    <el-dropdown-menu slot="dropdown">
      <div class="s-tool-column-header s-tool-column-item">
        <el-checkbox
          :indeterminate="indeterminate"
          v-model="checkAll"
          @change="onCheckAllChange"
        >
          列展示
        </el-checkbox>
        <!-- <a @click="reset">重置</a> -->
      </div>
      <div class="s-tool-column-item">
        <!-- <div class="s-tool-column-handle layout-items-center"></div> -->
        <el-checkbox
          v-for="(item, index) in columnsSetting"
          :key="index"
          v-model="item.checked"
          @change="onChange"
          >{{ item.label }}</el-checkbox
        >
      </div>
    </el-dropdown-menu>
  </el-dropdown>
  <!-- <ul class="el-dropdown-menu el-popper s-tool-column el-dropdown-content">
    <div class="el-checkbox-group">
      <div>
        
      </div>
    </div>
  </ul> -->
  <!-- <draggable
          :list="columnsSetting"
          item-key="dataIndex"
          animation="300"
          @end="emitColumnChange"
        >
          <template #item="{ element }">
            
          </template>
        </draggable> -->
</template>

<script>
// import draggable from "vuedraggable-es";

export default {
  components: {
    // draggable,
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    id: {
      type: [String, Number],
      required: false,
      default: "",
    },
  },
  data() {
    return {
      indeterminate: false,
      checkAll: true,
      columnsSetting: [],
      originColumns: [],
    };
  },
  mounted() {
    // const user = JSON.parse(localStorage.getItem("USER_INFO")).name;
    const user = "123";
    // 从本地存储中加载用户保存的列展示配置
    const storedColumns = JSON.parse(
      localStorage.getItem(`${user}:${this.$route.name}-${this.id}`)
    );
    this.columnsSetting =
      storedColumns ||
      this.columns.map((value) => ({
        ...value,
        checked: true,
      }));
    this.originColumns = [...this.columnsSetting];
    this.emitColumnChange();
  },
  methods: {
    reset() {
      this.originColumns = [...this.columnsSetting];
      this.indeterminate = false;
      this.checkAll = true;
      this.emitColumnChange();
    },
    onChange() {
      const checkedList = this.columnsSetting.filter((value) => value.checked);
      this.indeterminate =
        Boolean(checkedList.length) &&
        checkedList.length < this.columnsSetting.length;
      this.checkAll = checkedList.length === this.columnsSetting.length;
      this.emitColumnChange();
    },
    onCheckAllChange(e) {
      const val = e;
      Object.assign(this, {
        indeterminate: false,
        checkAll: val,
        columnsSetting: this.columns.map((value) => ({
          ...value,
          checked: val,
        })),
      });
      this.emitColumnChange();
    },
    // emitColumnChange() {
    //   // eslint-disable-next-line vue/require-explicit-emits
    //   this.$emit("columnChange", this.columnsSetting);
    // },
    emitColumnChange() {
      // 将用户保存的列展示配置存储到本地存储中
      //   const user = JSON.parse(localStorage.getItem("USER_INFO")).name;
      const user = "123";
      // 从本地存储中加载用户保存的列展示配置
      localStorage.setItem(
        `${user}:${this.$route.name}-${this.id}`,
        JSON.stringify(this.columnsSetting)
      );
      // eslint-disable-next-line vue/require-explicit-emits
      this.$emit("columnChange", this.columnsSetting);
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrapper {
}
.el-dropdown-menu {
  min-width: 150px;
}
.table-striped td {
  //   background-color: var(--table-row-hover-bg);
}
.s-table-tool {
  display: flex;
  margin-bottom: 16px;
  .s-table-tool-left {
    flex: 1;
  }
  .s-table-tool-right {
    .s-tool-item {
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.flex-check {
  display: flex;
  flex-direction: column;
}

.s-tool-column-item {
  //   display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 16px 4px 4px;
  .el-checkbox-wrapper {
    flex: 1;
  }
  .s-tool-column-handle {
    opacity: 0.8;
    cursor: move;
    .elicon-more {
      font-size: 12px;
      & + .elicon-more {
        margin: 0px 4px 0 -8px;
      }
    }
  }
}
.s-tool-column-header {
  //   padding: 5px 16px 10px 24px;
  min-width: 150px;
}
.s-tool-column {
  .el-divider {
    margin: 0;
  }
}
.el-checkbox {
  padding: 4px 0;
  margin-bottom: 5px;
  display: block;
}

.s-table-column-settings .el-popover-inner-content {
  padding: 0;
}
</style>
